<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>task2</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/task2.css">
</head>

<body>
    <header class="top">
        <img src="images/baidu_logo.png" alt="logo" class="logo">
        <ul class="nav">
            <li><a href="#article1">导航链接一</a></li>
            <li><a href="#article2">导航链接二</a></li>
            <li><a href="#article3">导航链接三</a></li>
            <li><a href="#article4">导航链接四</a></li>
            <div style="clear: both;"></div>
        </ul>
        <div style="clear: both;"></div>
    </header>
    <main>
        <article class="article" id="article1">
            <h1>文章一</h1>
            <h2>文章副标题</h2>
            <span>作者 时间</span>
            <p>这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。换行了。
                <br /> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <a href="ife.baidu.com" target="_blank">百度前端技术学院</a> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <strong>粗体字</strong> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。</p>
            <p class="imgCenter"><img src="images/2.jpg" alt="图片2"></p>
            <p>这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。换行了。
                <br /> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <a href="ife.baidu.com" target="_blank">百度前端技术学院</a> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <strong>粗体字</strong> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。</p>
        </article>
        <article class="article" id="article2">
            <h1>文章二</h1>
            <h2>文章副标题</h2>
            <span>作者 时间</span>
            <p>这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。换行了。
                <br /> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <a href="ife.baidu.com" target="_blank">百度前端技术学院</a> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。 <strong>粗体字</strong> 这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。这是一个很长的段落。</p>
            <p class="imgCenter"><img src="images/3.jpg" alt="图片2"></p>
            <ul>
                <li class="none">列表项目1</li>
                <li class="none">列表项目2</li>
                <li class="none">列表项目3</li>
            </ul>
        </article>
        <article class="article" id="article3">
            <h1>图片</h1>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
            <figure class="imgBorder">
                <figcaption>好看的图片</figcaption>
                <img src="images/baidu_logo.png" alt="图片4">
            </figure>
        </article>
        <article class="article" id="article4">
            <h1>最后一篇文章</h1>
            <h2>文章副标题</h2>
            <span>作者 时间</span>
            <ol>
                <li>列表项目1</li>
                <li>列表项目2</li>
                <li>列表项目3</li>
            </ol>
            <table class="table">
                <caption>下面是一个表格</caption>
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="">操作</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><strong>总计</strong></td>
                        <td colspan="2"><strong>1000</strong></td>
                    </tr>
                </tfoot>
            </table>
        </article>
        <aside class="sidebar" id="aside">
            <h1>这是侧边栏</h1>
            <form>
                <table>
                    <tr>
                        <td>请输入邮件地址</td>
                        <td>
                            <input type="text" placeholder="这是一个文本输入框"></input>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><span>邮箱地址请按要求填写</span></td>
                    </tr>
                    <tr>
                        <td>请输入密码</td>
                        <td>
                            <input type="password"></input>
                        </td>
                    </tr>
                    <tr>
                        <td>请重复输入密码</td>
                        <td>
                            <input type="password"></input>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><span>密码请为6到16位英文数字</span></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <input type="radio" name="性别" value="0">女</input>
                            <input type="radio" name="性别" value="1">男</input>
                        </td>
                    </tr>
                    <tr>
                        <td>城市</td>
                        <td>
                            <select class="formright">
                                <option value="0">北京</option>
                                <option value="1">上海</option>
                                <option value="2">广州</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            <input value="0" type="checkbox">运动</input>
                            <input value="1" type="checkbox">艺术</input>
                            <input value="2" type="checkbox">科学</input>
                        </td>
                    </tr>
                    <tr>
                        <td>个人描述</td>
                        <td>
                            <textarea placeholder="请输入您的个人描述" rows="10" cols="100"></textarea>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="submit"></input>
                </p>
            </form>
        </aside>
    </main>
    <footer>
        版权所有&copy; by menghao
    </footer>
</body>

</html>
